<template>
  <div>
    <!-- 头部 -->
    <header>
      <div class="head flex fcc underline" @click="$router.go(-1)">
        <i class="iconfont iconleft pl-15"></i>
        <p class="fg2 pl-15 f16">确认交易</p>
      </div>
    </header>
    <!-- 主体 -->
    <main class="main">
      <div class="introduce flex2 aic">
        <p class="f16">深圳较场尾.{{houseTypeName}}</p>
        <p class="money">{{totalMoney}}</p>
      </div>
      <div class="receivables flex jc-sb fcc">
        <p class="f14">收款方</p>
        <p class="f14">{{companyName}}</p>
      </div>
      <div class="immediately fcc ml-10 mr-10 mt-10" @click="pay">
        <p class="payment">立即支付</p>
      </div>
    </main>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      companyName: "深圳维拉假日科技有限公司",
      houseTypeName: ""
    };
  },
  created() {
    this.houseTypeName = this.$route.query.shopName;
  },
  computed: {
    ...mapGetters(["totalMoney"])
  },

  methods: {
    // 支付
    async pay() {
      let data = {
        ...this.$route.query,
        companyName: this.companyName
      };
      let url = "/order/pay";
      let res = await this.$axios.post(url, data);
      // console.log(res);
      if (res.code === "666") {
        // 提示用户支付成功并跳转
        this.$toast.success("支付成功");
        this.$router.push("/my");
      } else {
        this.$toast.fail("支付失败");
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/pay.less";
</style>

